<template>
  <div>
    <div class="top">
      <el-button
        type="success"
        :disabled="selectedIdList.length == 0"
        @click="revertFileBatch"
      >
        <span class="iconfont icon-revert">还原</span>
      </el-button>
      <el-button
        type="danger"
        :disabled="selectedIdList.length == 0"
        @click="delFileBatch"
      >
        <span class="iconfont icon-del">彻底删除</span>
      </el-button>
    </div>
    <div class="file-list">
      <Table
        ref="dataTableRef"
        :columns="columns"
        :dataSource="tableData"
        :fetch="loadDataList"
        :initFetch="true"
        :options="tableOptions"
        @rowSelected="rowSelected"
      >
        <template #fileName="{ index, row }">
          <div
            class="file-item"
            @mouseenter="showOp(row, 1)"
            @mouseleave="showOp(row, 0)"
          >
            <!-- 图片、视频的图标为封面图片，转码成功的 -->
            <template
              v-if="(row.fileType == 1 || row.fileType == 3) && row.status != 0"
            >
              <Icon :cover="row.fileCover" :width="32"></Icon>
            </template>
            <template v-else>
              <!-- 其他文件根据文件类型显示图标 -->
              <Icon v-if="row.fileClass == 1" :fileType="row.fileType"></Icon>
              <!-- 文件夹图标fileType=0 -->
              <Icon v-if="row.fileClass == 2" :fileType="0"></Icon>
            </template>
            <span class="file-name" :title="row.fileName">{{
              row.fileName
            }}</span>
            <span class="op">
              <template v-if="row.showOp">
                <span
                  class="iconfont icon-revert"
                  title="还原"
                  @click="revertFile(row)"
                  >还原</span
                >
                <span
                  class="iconfont icon-del"
                  title="删除"
                  @click="delFile(row)"
                  >删除</span
                >
              </template>
            </span>
          </div>
        </template>
        <template #fileSize="{ index, row }">
          <span v-if="row.fileSize">{{
            proxy.Utils.size2Str(row.fileSize)
          }}</span>
        </template>
      </Table>
    </div>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";

const { proxy } = getCurrentInstance();

const api = {
  loadDataList: "/recycle/loadDataList",
  revertFile: "/recycle/revertFile",
  deleteFile: "/recycle/deleteFile",
};

const columns = [
  {
    label: "文件名",
    prop: "fileName",
    scopedSlots: "fileName",
    minWidth: 360,
  },
  {
    label: "删除时间",
    prop: "recycleTime",
    width: 200,
  },
  {
    label: "大小",
    prop: "fileSize",
    width: 200,
    scopedSlots: "fileSize",
  },
];

const dataTableRef = ref({});
const tableData = ref({});
const tableOptions = ref({
  exHeight: 20,
  selectType: "checkbox",
});

// 加载文件列表
const loadDataList = async () => {
  let params = {
    pageNo: tableData.value.pageNo,
    pageSize: tableData.value.pageSize,
  };

  // 查看分类文件不限制父类ID
  if (params.category !== "all") {
    delete params.filePid;
  }

  let result = await proxy.Request({
    url: api.loadDataList,
    params: params,
  });

  if (!result) {
    return;
  }

  console.log(result.data);
  tableData.value = result.data;
};

// 已选中的文件列表
const selectedIdList = ref([]);

// 选中文件操作
const rowSelected = (rows) => {
  selectedIdList.value = [];
  rows.forEach((item) => {
    selectedIdList.value.push(item.fileId);
  });
};

// 展示操作按钮
const showOp = (row, type) => {
  // 遍历所有文件列表，隐藏全部文件的操作按钮
  tableData.value.list.forEach((item) => {
    item.showOp = false;
  });
  // 显示当前文件的操作按钮
  if (type == 1) {
    row.showOp = true;
  }
};

// 还原文件
const revertFile = (row) => {
  proxy.Confirm(`你确定要还原【${row.fileName}】吗？`, async () => {
    let result = await proxy.Request({
      url: api.revertFile,
      params: {
        fileIds: row.fileId,
      },
    });

    if (!result) {
      return;
    }

    loadDataList();
  });
};

// 批量还原文件
const revertFileBatch = () => {
  proxy.Confirm(`你确定要还原这些文件吗？`, async () => {
    let result = await proxy.Request({
      url: api.revertFile,
      params: {
        fileIds: selectedIdList.value.join(","),
      },
    });

    if (!result) {
      return;
    }

    loadDataList();
  });
};

const emit = defineEmits(["reloadUserSpace"])
// 删除文件
const delFile = (row) => {
  proxy.Confirm(
    `你确定要删除【${row.fileName}】吗？删除后无法恢复`,
    async () => {
      let result = await proxy.Request({
        url: api.deleteFile,
        params: {
          fileIds: row.fileId,
        },
      });

      if (!result) {
        return;
      }

      loadDataList();

      // 调用父组件方法，重新加载用户空间大小
      emit("reloadUserSpace")
    }
  );
};

// 批量删除文件
const delFileBatch = () => {
  proxy.Confirm(`你确定要删除这些文件吗？删除后无法恢复`, async () => {
    let result = await proxy.Request({
      url: api.deleteFile,
      params: {
        fileIds: selectedIdList.value.join(","),
      },
    });

    if (!result) {
      return;
    }

    loadDataList();

    emit("reloadUserSpace")
  });
};
</script>
<style lang="scss" scoped>
@import "@/assets/file_list.scss";

.file-list {
  margin-top: 10px;

  .file-item {
    .op {
      width: 120px;
    }
  }
}
</style>
